<template>
    <div>
        <div>
            <h1 class="title">基金信息补充</h1>
            <el-icon class="refresh" @click="refresh"><RefreshRight /></el-icon>
        </div>
        <el-form ref="timeAndHaveFormRef" :model="timeAndHave" :rules="rules" class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="选择基金" prop="name">
                <el-select v-model="timeAndHave.name" placeholder="选择基金">
                    <el-option v-for="item in allFund" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="本金" prop="principal">
                <el-input-number v-model="timeAndHave.principal" />
            </el-form-item>
            <el-form-item label="第一次持有时间" prop="date">
                <el-date-picker v-model="timeAndHave.date" type="date" placeholder="Pick a date" clearable />
            </el-form-item>
            <el-form-item label="基金代码" prop="code">
                <el-input v-model="timeAndHave.code" />
            </el-form-item>
            <el-form-item>
                <el-button class="confirm" type="primary" @click="submitFormTime(timeAndHaveFormRef)"> 确定 </el-button>
                <el-button @click="resetForm(timeAndHave)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import { getAllFundInfoAPI, updateFundInfoAPI } from "src/httpApi/assetHttp";
import { ElMessage } from "element-plus";

const formSize = ref<ComponentSize>("default");

const allFund = ref<any>([]);

const timeAndHaveFormRef = ref<FormInstance>();
const timeAndHave = reactive<any>({
    name: "",
    principal: null,
    date: "",
    code: "",
});

const rules = reactive<FormRules<any>>({
    source: [{ required: true, message: "请选择来源", trigger: "blur" }],
    name: [{ required: true, message: "请填写名称", trigger: "blur" }],
    financialType: [{ required: true, message: "请选择来源", trigger: "blur" }],
    fundNum: [{ required: true, message: "请输入资金", trigger: "blur" }],
    principal: [{ required: true, message: "请输入本金", trigger: "blur" }],
    date: [{ required: true, message: "请选择时间", trigger: "blur" }],
});

const submitFormTime = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log("submit!");
            updateFundInfo();
        } else {
            console.log("error submit!", fields);
        }
    });
};

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};

const resetTimeAndHaveFrom = () => {
    timeAndHave.name = "";
    timeAndHave.principal = null;
    timeAndHave.date = "";
    timeAndHave.code = "";
};

const getAllFund = async () => {
    const res = await getAllFundInfoAPI();
    const transferArr: any[] = [];
    if (res.code === 200) {
        res.result.forEach((item: any) => {
            transferArr.push({
                key: item,
                label: item,
                value: item,
            });
        });
    }
    allFund.value = transferArr;
};

const refresh = () => {
    getAllFund();
};

const updateFundInfo = async () => {
    const params = {
        ...timeAndHave,
    };
    const res = await updateFundInfoAPI(params);
    if (res.code === 200) {
        ElMessage({
            message: "基金信息更新成功！",
            type: "success",
        });
        resetTimeAndHaveFrom();
    } else {
        ElMessage({
            message: "基金信息更新失败！",
            type: "error",
        });
    }
};

onMounted(() => {
    getAllFund();
});
</script>

<style scoped>
.confirm {
    margin-left: 80px;
}
.title {
    line-height: 24px;
    font-size: 20px;
    display: inline-block;
}
.refresh {
    display: inline-block;
    margin-left: 20px;
    margin-top: -6px;
    font-size: 20px;
    cursor: pointer;
    vertical-align: middle; /* 或 baseline */
}
</style>
